<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>combotree</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">

<h3>ComboTree</h3>
<p>Extend from $.fn.combo.defaults and $.fn.tree.defaults. Override defaults with $.fn.combotree.defaults.</p>
<p>
The combotree combines the selection control with drop-down tree.
It is similar to combobox but replace the list with tree component.
The combotree supports a tree with tree-state checkboxes for convenient multiple selection.
</p>
<img src="images/combotree.png">

<h4>Dependencies</h4>
<ul>
	<li>combo</li>
	<li>tree</li>
</ul>

<h4>Usage</h4>
<p>Create combotree from markup.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">select</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"cc"</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-combotree"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:200px;"</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="attribute">data-options</span><span>=</span><span class="attribute-value">"url:'get_data.php',required:true"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">select</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-combotree" style="display: none;">	&lt;select id="cc" class="easyui-combotree" style="width:200px;"
			data-options="url:'get_data.php',required:true"&gt;&lt;/select&gt;
</textarea>
<p>Create combotree using javascript.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"cc"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">"01"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-combotree" style="display: none;">	&lt;input id="cc" value="01"&gt;
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#cc'</span><span>).combotree({&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;<span class="string">'get_data.php'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;required:&nbsp;<span class="keyword">true</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-combotree" style="display: none;">	$('#cc').combotree({
		url: 'get_data.php',
		required: true
	});
</textarea>

<br>
<h4>Properties</h4>
<p>The properties extend from combo and tree, below is the overridden properties for combotree.</p>
<table class="doc-table">

<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>editable</td>
<td>boolean</td>
<td>Defines if user can type text directly into the field.</td>

<td>false</td>
</tr>
</tbody></table>

<h4>Events</h4>
<p>The events extend from combo and tree.</p>

<h4>Methods</h4>
<p>The methods extend from combo, below is the added and overridden methods for combotree.</p>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>options</td>
<td>none</td>
<td>Return the options object.</td>

</tr>
<tr>
<td>tree</td>
<td>none</td>
<td>
Return the tree object.
The example below shows how to get the selected tree node.
<pre>var t = $('#cc').combotree('tree');	// get the tree object
var n = t.tree('getSelected');		// get selected node
alert(n.text);
</pre>
</td>
</tr>
<tr>
<td>loadData</td>
<td>data</td>
<td>
Load the locale tree data.
<p>Code example:</p>
<pre>$('#cc').combotree('loadData', [{
	id: 1,
	text: 'Languages',
	children: [{
		id: 11,
		text: 'Java'
	},{
		id: 12,
		text: 'C++'
	}]
}]);
</pre>
</td>
</tr>

<tr>
<td>reload</td>
<td>url</td>
<td>Request the remote tree data again. Pass the 'url' parameter to override the original URL value.</td>
</tr>
<tr>
<td>clear</td>
<td>none</td>
<td>Clear the component value.</td>
</tr>
<tr>

<td>setValues</td>
<td>values</td>
<td>
Set the component value array.
<p>Code example:</p>
<pre>$('#cc').combotree('setValues', [1,3,21]);
</pre>
</td>
</tr>
<tr>
<td>setValue</td>
<td>value</td>
<td>
Set the component value.
<p>Code example:</p>
<pre>$('#cc').combotree('setValue', 6);
</pre>
</td>
</tr>
</tbody></table>


</div>
</body>
</html>